<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;width: 60%;" size="small" label-width="100px">
      <el-form-item label="抄报人" prop="userName">
        <el-input v-model="form.userName" />
        <!-- <div style="display:flex;">
          <el-input v-model="form.userName" disabled />
          <el-button type="parimary" @click="userVisible=true">选择</el-button>
        </div> -->
      </el-form-item>
      <!-- <div ref="editor" class="editor" /> -->
      <el-button :loading="loading" style="margin-left:1.6%;" size="medium" type="primary" @click="doSubmit">保存</el-button>
    </el-form>
    <SelecrGrop
      v-if="userVisible"
      :dialog-visible.sync="userVisible"
      title="选择人员"
      @select="selectUser"
    />
  </div>
</template>

<script>
import crudTCopier from '@/api/system/tCopier'
import SelecrGrop from '../components/selecrGropUser'
export default {
  name: 'Index',
  components: { SelecrGrop },
  data() {
    return {
      loading: false,
      form: { userName: '', id:'1' },
      userVisible: false,
      rules: {
        userName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      crudTCopier.view().then(res => {
        this.form.userName = res.userName
      })
    },
    doSubmit() {
      const _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          crudTCopier.edit(this.form).then(res => {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    },
    selectUser(row) {
      this.userVisible = false
      this.form.userName = row.username
      this.form.userId = row.id
      this.form.user = { username: row.username, id: row.id }
    }
  }
}
</script>

<style scoped>
  .editor{
    text-align:left;
    margin: 20px;
    width: 730px;
  }
 ::v-deep .w-e-text-container {
    height: 360px !important;
  }
</style>
